import { useEffect, useRef, useCallback } from "react";
import * as echarts from "echarts";
import type { RelationProps } from "@/types/echarts";

export default function Relation({ data }: { data: RelationProps[] }) {
  const target = useRef<HTMLDivElement>(null);
  const chartRef = useRef<echarts.ECharts | null>(null);

  const initEcharts = useCallback(() => {
    if (!target.current || !data || data.length === 0) return; // 确保数据有效
    // Dispose the existing chart instance if it exists
    if (chartRef.current) {
      chartRef.current.dispose();
    }
    chartRef.current = echarts.init(target.current);
    // 渲染图表
    const options = {
      // X 轴不需要展示
      xAxis: {
        show: false,
        type: "value",
      }, // X 轴不需要展示
      yAxis: {
        show: false,
        type: "value",
      }, // 核心数据配置
      series: [
        {
          // 用于展现节点以及节点之间的关系数据
          type: "graph", // 不采用任何布局
          layout: "none", // 使用二维的直角坐标系
          coordinateSystem: "cartesian2d", // 节点标记的大小
          symbolSize: 26, // z-index
          z: 3, // 边界标签（线条文字）
          edgeLabel: {
            show: true,
            color: "#fff",
            fontSize: 14,
            formatter: function (params: {
              data: { speed: string | undefined };
            }) {
              let txt = "";
              if (params.data.speed !== undefined) {
                txt = params.data.speed;
              }
              return txt;
            },
          }, // 圆饼下文字
          label: {
            show: true,
            position: "bottom",
            color: "#5e5e5e",
          }, // 边两端的标记类型
          edgeSymbol: ["none", "arrow"], // 边两端的标记大小
          edgeSymbolSize: 8, // 圆数据
          data: data.map((item) => {
            // id 为 0 ，表示数据中心，数据中心单独设置
            if (item.id !== 0) {
              return {
                name: item.name,
                category: 0,
                active: true, // 位置
                value: item.value,
              };
            } else {
              return {
                name: item.name, // 位置
                value: item.value, // 数据中心圆的大小
                symbolSize: 100, // 圆的样式
                itemStyle: {
                  // 渐变色
                  color: {
                    colorStops: [
                      { offset: 0, color: "#157eff" },
                      { offset: 1, color: "#35c2ff" },
                    ],
                  },
                }, // 字体
                label: { fontSize: "14" },
              };
            }
          }), // 线
          links: data.map((item) => ({
            coords: [
              [item.value[0], item.value[1]],
              [item.value[1], item.value[0]],
            ], // 使用 coords 属性
            source: item.source,
            target: item.target,
            speed: `${item.speed}kb/s`,
            lineStyle: { color: "#12b5d0", curveness: 0.2 },
            label: {
              show: true,
              position: "middle",
              offset: [10, 0],
            },
          })),
        },
        {
          // 用于带有起点和终点信息的线数据的绘制
          type: "lines", // 使用二维的直角坐标系
          coordinateSystem: "cartesian2d", // z-index
          z: 1, // 线特效的配置
          effect: {
            show: true,
            smooth: false,
            trailLength: 0,
            symbol: "arrow",
            color: "rgba(55,155,255,0.5)",
            symbolSize: 12,
          }, // 线的样式
          lineStyle: {
            curveness: 0.2,
          }, // 线的数据级，前后线需要重合。数据固定
          data: [
            [{ coord: [0, 300] }, { coord: [50, 200] }],
            [{ coord: [0, 100] }, { coord: [50, 200] }],
            [{ coord: [50, 200] }, { coord: [100, 100] }],
            [{ coord: [50, 200] }, { coord: [100, 300] }],
          ],
        },
      ],
    };

    chartRef.current.setOption(options);
  }, [data]); // 添加 data 作为依赖

  useEffect(() => {
    initEcharts();
    const handleResize = () => {
      if (chartRef.current) {
        chartRef.current.resize();
      }
    };
    window.addEventListener("resize", handleResize);
    const targetCurrent = target.current;
    return () => {
      window.removeEventListener("resize", handleResize);

      if (targetCurrent) {
        echarts.dispose(targetCurrent);
      }
      // Dispose the chart instance
      if (chartRef.current) {
        echarts.dispose(chartRef.current);
        chartRef.current = null; // Set to null after disposing
      }
    };
  }, [initEcharts]); // 监视 initEcharts 的变化

  return (
    <div className="h-1/3 box-border pb-4">
      <div className="text-2xl text-white">【数据传递信息】</div>
      <div ref={target} className="w-full h-full"></div>
    </div>
  );
}
